<template>

    <h1>vue 生命周期</h1>
    <p id="myp">{{ msg }}</p>
    <ul id="myul">
        <li v-for="(item,index) in arr" :key="index">
        {{ item }}
        </li>
    </ul>
    <button @click="arr.push(6)">向末尾添加</button>
</template>
<script>
export default {
    data() { 
        return {
            msg: 'hello 你好 准备降生',
            time: null,
            arr:[1,2,3,4,5] // 定时器
        }
    },
    beforeCreate() {
        //创建前 不会加载数据 data里面的数据 加载属性和方法 只是读取虚拟的dom data和methods 初始化之前做的事情
        console.log("beforeCreate开始执行了。。。");
        console.log('beforeCreate==', this.msg);
    },
    //真实的dom挂载 在data和方法之后执行
    created() { 
         console.log("Created开始执行了。。。");
        console.log('Created==', this.msg);
    },
    beforeMount() { 
        console.log("beforeMount开始执行了。。。");
        console.log(document.getElementById('myp'));
        this.msg= '完了 获取失败'
    },
    mounted() { 
        /**
         * 经常用的钩子函数 ： 页面加载立即执行 立即渲染页面
         */
        console.log("mounted开始执行了。。。");
         console.log(document.getElementById('myp'));
    },
    beforeUpdate() {
        console.log("beforeUpdate开始执行了。。。");
        console.log(document.getElementById('myul'));
        console.log(document.querySelectorAll('#myul li')[5]);
    },
    updated() {
        console.log("updated开始执行了。。。");
        console.log(document.querySelectorAll('#myul li')[5]);
    },
    beforeUnmount() { 
        //销毁前
        console.log("beforeUnmount开始执行了。。。");
        
    },
    unmounted() {
        //销毁后
        console.log("unmounted开始执行了。。。");
    }
}


</script>